
<script setup>
import WOW from "wow.js";
import bianju from './bianju.vue'
import { ref, onMounted } from 'vue'

defineProps({
    msg: String,
})

onMounted(() => {


    var wow = new WOW({
        boxClass: "wosw", // animated element css class (default is wow)
        animateClass: "animated", // animation css class (default is animated)
        offset: 0, // distance to the element when triggering the animation (default is 0)
        mobile: true, // trigger animations on mobile devices (default is true)
        live: true, // act on asynchronously loaded content (default is true)
        callback: function () {
            // the callback is fired every time an animation is started
            // the argument that is passed in is the DOM node being animated
        },
        scrollContainer: null, // optional scroll container selector, otherwise use window,
        resetAnimation: true, // reset animation on end (default is true)
    });
    wow.init();
})

const count = ref(0)
</script>

<template>
    <div class="anliBox">
        <div class="left">
            <div class="left_a wosw slideInLeft">

                <img src="http://pmt5f46b3.pic13.websiteonline.cn/upload/0425_01_asdp.jpg" alt="">
            <bianju />
            </div>

            <ul class="left_b">
                <li class="wosw slideInLeft">
                    <img src="http://pmt5f46b3.pic13.websiteonline.cn/upload/0425_01_l80w.jpg" alt="">
                    <bianju />
                </li>
                <li class="wosw slideInRight">
                    <img src="http://pmt5f46b3.pic13.websiteonline.cn/upload/0425_01_l80w.jpg" alt="">
                    <bianju />
                </li>
            </ul>
            <!-- class="" -->
        </div>
        <div class="right_a">
            <ul>
                <li class="wosw slideInDown ">

                    <img src="http://pmt5f46b3.pic13.websiteonline.cn/upload/0425_01_l80w.jpg" alt="">
                    <bianju />
                </li>
                <li class="wosw slideInDown">
                    <img src="http://pmt5f46b3.pic13.websiteonline.cn/upload/0425_01_l80w.jpg" alt="">
                    <bianju />
                </li>
            </ul>
        </div>

    </div>
</template>

<style scoped>
img {
    width: 100%;
    height: 100%;
    transition: all .2s;
}

.right_a {
    width: 40%;
    height: 100%;
}

.right_a ul {

    height: 100%;
}

.right_a ul li {
    position: relative;
    overflow: hidden;
    background-color: #000;
    height: 49%;
}
.right_a ul li:hover{
    img{
    transition: all .2s linear;
transform: scale(1.1);
  }
  .poss{height: 45px;}
}
.right_a ul li:first-child {
    margin-bottom: 2%;
}

.left_b {
    display: flex;
    height: 40%;
    justify-content: space-between;
}

.left_b li {
    width: 49%;
    overflow: hidden;
    position: relative;
    background-color: #000;
}
.left_b li:hover{
    img{
    transition: all .2s linear;
transform: scale(1.1);
  }
  .poss{height: 45px;}
}

.left_a {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    width: 100%;
    background: #bf5252;
    height: 58%;
    margin-bottom: 2%;
   
}
.left_a:hover{
  img{
    transition: all .2s linear;
transform: scale(1.1);
  }
  .poss{height: 45px;}

}
/* .xiangc li:hover{
  img{
    transition: all .2s linear;
   transform: scale(1.1);
  }
} */

.anliBox {
    display: flex;
    width: 100%;
    height: 540px;
}

.left {
    width: 58%;
    height: 100%;
    margin-right: 10px;
}

li {
    cursor: pointer;
}</style>
